<template>
  <view class="comment-list">
    <view v-for="(comment, index) in commentList" :key="index">
      <view class="comment-item">
        <view class="comment-avatar">
          <image
            class="avatar_img"
            :src="this.baseURL + comment.comment_user_avatar"
          />
        </view>
        <view class="comment-content">
          <view class="comment-name">{{ comment.comment_username }}: </view>
          <view class="comment-text">{{ comment.comment_content }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { commentsData } from "@/data-test/comments-data";
  import api from "@/API";
  export default {
    name: "FollowComment",
    props: {
      videoId: {
        type: [Number, String],
        required: true,
      },
    },
    data() {
      return {
        commentList: [],
        fillData: "1".repeat(1000),
      };
    },
    methods: {
      async loadComment() {
        const filterComments = (comments, videoId) => {
          return comments.filter((item) => item.video_id === videoId);
        };
        api.video
          .getVideoComments()
          .then(
            (res) => (this.commentList = filterComments(res.data, this.videoId))
          )
          .catch((err) => {
            if (!err.data && err.statusCode === 500) {
              this.commentList = filterComments(commentsData, this.videoId);
            }
          });
      },
    },
    created() {
      this.loadComment();
    },
  };
</script>

<style scoped>
  .comment-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .comment-avatar {
    padding-right: 5px;
    margin: 5px 0;
  }
  .avatar_img {
    width: 14px;
    height: 14px;
    border-radius: 50%;
  }
  .comment-content {
    display: flex;
  }
  .comment-name {
    padding-right: 10px;
    margin-right: 10px;
    color: #f0f0f0c4;
  }
</style>
